<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/datatables/1.10.16/css/jquery.dataTables.css" rel="stylesheet">
</head>
<body ng-app ="myModule">
<div ng-controller="AngularWayChangeDataCtrl as showCase">
    <form class="form-inline" ng-submit="showCase.addPerson()">
        <table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover">
            <thead>
            <tr>
                <th>
                    <div class="form-group">
                        <label>
                            <input class="form-control" type="number" name="id" ng-model="showCase.person2Add.id" value="">
                        </label>
                    </div>
                </th>
                <th>
                    <div class="form-group">
                        <label>
                            <input type="text" class="form-control" name="firstName" ng-model="showCase.person2Add.firstName" value="">
                        </label>
                    </div>
                </th>
                <th>
                    <div class="form-group">
                        <label>
                            <input type="text" class="form-control" name="lastName" ng-model="showCase.person2Add.lastName" value="">
                        </label>
                    </div>
                </th>
                <th>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success">新增</button>
                    </div>
                </th>
            </tr>
            <tr>
                <th>ID</th>
                <th>FirstName</th>
                <th>LastName</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="person in showCase.persons">
                <td>{{ person.id }}</td>
                <td>{{ person.firstName }}</td>
                <td>{{ person.lastName }}</td>
                <td>
                    <button type="button" ng-click="showCase.modifyPerson($index)" class="btn btn-warning">修改</button>
                    <button type="button" ng-click="showCase.removePerson($index)" class="btn btn-danger">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
<script src="plug/jquery-1.10.1.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.10/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-datatables/0.6.2/angular-datatables.js"></script>
<script src="controller/app.js"></script>

</body>
</html>